<template>
	<view class="page-content">
		<u-sticky bgColor="#fff">
			<u-navbar :is-back="false" title="湖北移动网络运营看板-割接" title-color="#000" :border-bottom="true">
			</u-navbar>
			<u-tabs :list="Datelist" :current="current" :is-scroll="false" bar-width="200" @change="tabsChange">
			</u-tabs>
		</u-sticky>
		<!-- 割接情况 -->
		<view class="bg">
			<view class="title">
				{{`${Datelist[current].name}`+'情况'}}
			</view>
		</view>
		<view class="content">
			<!-- 统计 -->
			<view class="tabs">
				<view class="tabs-padding">
					<u-subsection :list="cuttingList" :current="activeTab" @change="tabClick" active-color="#fff" inactive-color="#A7ABBB" bg-color="#F1F6FF" button-color="#1B9CFF" font-size="26upx"></u-subsection>
				</view>
				
				<view class="cuttingPage-bg">
					<view class="total">
						<img src="@/static/images/pic_detail_gejie1.png" class="total-img" alt="">
						<view class="count" >
							<view class="test">{{`全网${cuttingList[activeTab].value}类割接:`}}</view>
							<view class="number">{{cuttingForm.CutOverNum}}</view>
							<view class="test">起</view>
						</view>
                    </view>
					<view class="type-quantity">
						<view class="item-center">
							<view class="each" @click="onCutting(1)">
								<view class="icon"></view>
								<view class="number">{{cuttingForm.SuccessNum}}</view>
								<view class="font">起</view>
							</view>
							<view class="each each1" @click="onCutting(2)">
								<view class="icon"></view>
								<view class="number">{{cuttingForm.FailNum}}</view>
								<view class="font">起</view>
							</view>
							<view class="each each3" @click="onCutting(4)">
								<view class="icon"></view>
								<view class="number">{{cuttingForm.NoResultNum}}</view>
								<view class="font">起</view>
							</view>
							<view class="each each2" @click="onCutting(3)">
								<view class="icon"></view>
								<view class="number">{{cuttingForm.CancelNum}}</view>
								<view class="font">起</view>
							</view>
						</view>
					</view>
				</view>
			
			</view>
		
			<!-- 详情图标 -->
			<view class="title1"></view>
			<!-- 详情 -->
			<view :class="{'item': true, 'first-item': index === 0}" v-for="(item, index) in cutoverInfo" :key="item.ID">
				<view class="item-top">
					<view class="item-top">
						<view class="item-top-left">
							<view class="test1">{{item.Dept}}</view>
							<view class="test1">{{item.Level}}类</view>
						</view>
						
						<view class="test1" v-if="item.Finishstatus" :style="item.Finishstatus == '完成' ? 'background: #e6f7f2;color: #0CB480' : item.Finishstatus == '失败' ? 'background: #fbe7e7;color: #D61515' : item.Finishstatus == '超时' ? 'background: #fef1e5;color: #F37A00' : item.Finishstatus == '取消' ? 'background: rgba(167,171,187,0.1);color: #a7abbb' : ''">
						  <view :class="['icon', item.Finishstatus === '失败' ? 'icon2' : '', item.Finishstatus === '超时' ? 'icon3' : '',item.Finishstatus === '取消' ? 'icon4' : '']"></view>
						  {{item.Finishstatus == '超时' ? '未反馈' : item.Finishstatus}}
						</view>
					</view>
					<!-- <view class=item-top-right>
						<view class="city">{{`湖北-${item.City}`}}</view>
					</view> -->
				</view>
				<view class="item-center">
					<view class="item-center-icon"></view>
					<view class="item-center-text">{{item.Title}}</view>
				</view>
				<view class="item-time">
					<view class="item-time-text">{{`操作起始时段： ${item.Starttime} - ${item.Endtime}`}}</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="12"   closeable safe-area-inset-bottom close-icon-color="#fff">
			<view class="popupBox">
				<view class="titleView">温馨提示</view>
				<view class="boxNr">
					<view class="nrTitle">
						<br>
						割接标题：黄梅黄梅柳梗传输机房搬迁割接
						<br>
						割接单位：黄冈
						<br>
						网络级别：B类
						<br>
						割接完成情况：取消
					</view>
				</view>
			</view>
		</u-popup>
		<view>
			<u-popup v-model="showOvertime" mode="center" border-radius="12"   closeable safe-area-inset-bottom close-icon-color="#fff">
				<view class="popupBox">
					<view class="titleView">{{popupTitle}}</view>
					<view class="boxNr">
						<view class="nrTitle" v-for="(item,index) in overtime">
							{{item.name}} : {{item.value}} 起
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script module="echarts" lang="renderjs">
	import $ from 'common/utils/jquery-3.5.1.min.js'
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	const jsonData = require('static/map/hubei.json');
	export default {
		data() {
			return {
				show:false,
				showOvertime: false,
				overtime: [],
				overtimeList: [],
				overtimeList2: [],
				overtimeList3: [],
				overtimeList4: [],
				overtimeList5: [],
				Datelist: [],  // 割接时间
				cuttingList: [{
					name: 'A类割接',
					value:'A'
				}, {
					name: 'B类割接',
					value:'B'
				}, {
					name: 'C类割接',
					value:'C'
				}, {
					name: 'D类割接',
					value:'D'
				}], // 割接类型
				current: 0, // 选中日期
				activeTab: 0, //  选中切割类型
				cuttingForm:{
					"CutOverNum": 0, //割接总数
					"SuccessNum": 0, //成功数
					"FailNum": 0, //失败数
					"CancelNum": 0, //取消数
					"NoResultNum":0  //未反馈数0
				}  ,// 每日割接情况
				loading:false,
				cutoverInfo:[], // 割接明细
				popupTitle: '', //
				dsNameList: [ "武汉", "宜昌", "十堰", "襄阳", "荆州", "荆门", "随州", "江汉", "孝感", "黄石", "鄂州", "恩施", "黄冈", "潜江", "天门", "咸宁"]
			}
		},
		watch : {
			// 监听路由变化
			'$route'(to, from) {
			  if (to.path === '/pagesJK/cuttingPage/index') {
			    	this.initPage()
			  }    
			},
			value: {
				handler(newVal) {
					if (newVal) {
						this.parseValue(fixIosDateFormat(newVal))
						this.initTime(false)
					} else {
						this.time = ''
						this.parseValue(Date.now())
					}
				}
			}
		},
		onLoad(){
		},
		mounted() {
			this.initPage()
		},
		methods: {
			initPage(){
				// 初始化数据
				this.initializeDatelist();
				//查询每日割接情况
				this.getcutoverData()
				//查询每日割接情况
				this.getcutoverInfo()
			},
			onCutting(type){
				if(type == 1){
					this.popupTitle = '割接完成'
					this.overtime = this.overtimeList
				}else if(type == 2){
					this.popupTitle = '割接失败'
					this.overtime = this.overtimeList2
				}else if(type == 3){
						this.popupTitle = '割接取消'
					this.overtime = this.overtimeList3
				}else if(type == 4){
						this.popupTitle = '割接未反馈'
					this.overtime = this.overtimeList4
				}
				if(this.overtime.length > 0){
					this.showOvertime = true
				}
				
			},
			onWhat(){
				if(this.activeTab == 1){
					this.show =true
				}
			},
			// 获取割接数量
		    async getcutoverData(){
				let  params=`?date=${this.Datelist[this.current].value}&category=${this.cuttingList[this.activeTab].value}&cuttype=${this.current+1}`
			    await this.$api.getcutoverData(params).then(res =>{
					if(res.Code == 200){
						this.cuttingForm = res.Data 
					}
				})
			},
			
			// 获取割接明细数据
		    async getcutoverInfo(){
				let params=`?date=${this.Datelist[this.current].value}&category=${this.cuttingList[this.activeTab].value}&cuttype=${this.current+1}`
			    await this.$api.getcutoverInfo(params).then(res =>{
					if(res.Code == 200){
						this.cutoverInfo = res.Data || []
						this.overtimeList = []
						this.overtimeList2 = []
						this.overtimeList3 = []
						this.overtimeList4 = []
						this.overtimeList5 = []
						let arr = []
						let arr2 = []
						let arr3 = []
						let arr4 = []
						res.Data.forEach(item => {
							if(item.Finishstatus == '完成'){
								arr.push({  
									name: item.City,
									value: 0
								})
							}
							if(item.Finishstatus == '失败'){
								arr2.push({
									name: item.City,
									value: 10
								})
							}
							if(item.Finishstatus == '取消'){
								arr3.push({
									name: item.City,
									value: 1
								})
							}
							if(item.Finishstatus == '超时'){
								arr4.push({
									name: item.City,
									value: 5
								})
							}
							const combinedArray = arr2.concat(arr3, arr4);
							this.overtimeList = this.reduceFun(arr)
							this.overtimeList2 = this.reduceFun(arr2)
							this.overtimeList3 = this.reduceFun(arr3)
							this.overtimeList4 = this.reduceFun(arr4)
							combinedArray.forEach(item => {
								if(!this.dsNameList.includes(item.name)){
									item.name = '武汉'
								}
							})
							this.overtimeList5 = this.reduceFun2(combinedArray) 
							// this.mYChartmap()
						})
					}
				});
			},
			//处理数据
			reduceFun(arr){
				let result = arr.reduce((acc, item) => {
				  if (acc.some(city => city.name === item.name)) {
				    // 如果城市已存在，增加其计数
				    const city = acc.find(city => city.name === item.name);
				    city.value++;
				  } else {
				    // 如果城市不存在，添加到数组
				    acc.push({ name: item.name, value: 1 });
				  }
				  return acc;
				}, []);
				return result
			},
			//颜色数据处理
			reduceFun2(arr){
				const result = arr.reduce((acc, item) => {
				  if (acc.some(city => city.name === item.name)) {
				    // 如果城市已存在，找到对应的城市对象并更新其 value 为最大值
				    const city = acc.find(city => city.name === item.name);
				    city.value = Math.max(city.value, item.value);
				  } else {
				    // 如果城市不存在，添加到数组
				    acc.push(item);
				  }
				  return acc;
				}, []);
				return result
			},
			 // 切换日期
			tabsChange(index) {
				this.current = index;
				this.activeTab = 0
				//查询每日割接情况
				this.getcutoverData()
				//查询每日割接情况
				this.getcutoverInfo()
			},
			// 点击切割类型
			tabClick(index) {
				this.activeTab = index
				//查询每日割接情况
				this.getcutoverData()
				//查询每日割接情况
				this.getcutoverInfo()
				
			},
			// 获取当前时间
			initializeDatelist() {
				  this.activeTab = 0
				  this.current = 0
			      const today = new Date();
			      const tomorrow = new Date(today);
			      tomorrow.setDate(today.getDate() + 1);
			      function formatDate(date) {
			        const year = date.getFullYear();
			        const month = String(date.getMonth() + 1).padStart(2, '0');
			        const day = String(date.getDate()).padStart(2, '0');
			        return `${year}-${month}-${day}`;
			      }
			      function formatName(date) {
			        const month = date.getMonth() + 1;
			        const day = date.getDate();
			        return `${month}月${day}号割接`;
			      }
				  function addOneDay(dateString) {
				    // 将日期字符串转换为Date对象
				    const date = new Date(dateString);
				    // 给日期加1天
				    date.setDate(date.getDate() + 1);
				    // 格式化输出为 "年-月-日"
				    const year = date.getFullYear();
				    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以加1
				    const day = date.getDate().toString().padStart(2, '0');
				    return `${year}-${month}-${day}`;
				  }
				
			      let todayFormatted = formatDate(today);
			      let tomorrowFormatted = formatDate(tomorrow);
			      let todayName = formatName(today);
			      let tomorrowName = formatName(tomorrow);
				  //如果有缓存时间就用缓存时间
				  	let pageDate = localStorage.getItem('pageDate')  //缓存时间
					if(pageDate){
						todayName = formatName(new Date(pageDate))
						todayFormatted =  formatDate(new Date(pageDate));
			            tomorrowName = formatName(new Date(addOneDay(pageDate)))
						tomorrowFormatted = formatDate(new Date(addOneDay(pageDate)));
					}
			      this.Datelist = [
			        { name: todayName, value: todayFormatted },
			        { name: tomorrowName, value: tomorrowFormatted }
			      ];
			    }
		}
	}
</script>

<style lang="scss" scoped>
	.u-sticky {
		width: 100% !important;
	}

	.bg {
		width: 100%;
		height: 370rpx;
		background-color: #fff;
		background: url(@/static/images/banner_gejie.png) no-repeat center;
		background-size: contain;
		position: relative;

		.title {
			width: 437rpx;
			height: 110rpx;
			background: url(@/static/images/pic_title_gejie.png) no-repeat center;
			background-size: contain;
			position: absolute;
			left: 18rpx;
			bottom: 70rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 700;
			padding: 21rpx 0 0 85rpx;
		}
	}

	.content {
		width: 100%;
		padding: 30rpx 20rpx;
		background-color: #CCE7FF;
		position: relative;
        min-height: calc(100vh - 620rpx);
		.tabs {
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: -120rpx;
			position: relative;
			margin-bottom: 20rpx;
			padding-bottom: 50rpx;
            .tabs-padding{
				padding: 30rpx 19rpx 0 19rpx;
				width: 100%;
				u-subsection{
					width: 100%;
				}
			}
			.cuttingPage-bg{
				margin-top: 23rpx;
				width: 100%;
				height: 243rpx;
			    background: url(@/static/images/pic_detail_guzhang_bg1.png) no-repeat center;
				background-size:100% 243rpx;
				border-radius: 16rpx 16rpx 0 0;
				.total{
					height: 151rpx;
					display: flex;
					align-items: center;
					.total-img{
						width: 138rpx;
						height: 138rpx;
						margin-left: 50rpx;
					}
					.count {
						display: flex;
						align-items: center;
					    margin-left: 15rpx;
						.test {
							font-size: 28rpx;
							color: #FFFFFF;
							margin-right: 14rpx;
							font-weight: 400;
						}
						.number {
							font-weight: bold;
							font-size: 42rpx;
							color: #FFFFFF;
							margin-right: 10rpx;
							text-shadow: 0px 3px 0px rgba(0,0,0,0.5);
						}
					}
				}
				
				.type-quantity{
					width: 100%;
					height: 94rpx;
					padding: 0 30rpx 0 20rpx;
					.item-center {
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						height: 94rpx;
						background: #FFFFFF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						.each {
							width: 145rpx;
							height: 60rpx;
							background: rgba(10,10,120,0.05);
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #0CB480;
					
							.icon {
								width: 30rpx;
								height: 30rpx;
								background: url(@/static/images/icon_gejie1.png) no-repeat center;
								background-size: 100%;
							}
					
							.number {
								font-size: 36rpx;
								font-weight: 700;
								margin: 0 6rpx;
							}
					
							.font {
								font-size: 20rpx;
							}
						}
					
						.each1 {
							color: #FF4D4D;
							.icon {
								background: url(@/static/images/icon_gejie2.png) no-repeat center;
								background-size: 100%;
							}
						}
					
						.each2 {
							color: #A7ABBB;
					
							.icon {
								background: url(@/static/images/icon_gejie3.png) no-repeat center;
								background-size: 100%;
							}
						}
					
						.each3 {
							color: #D8B837;
					
							.icon {
								background: url(@/static/images/icon_gejie4.png) no-repeat center;
								background-size: 100%;
							}
						}
					}
				}
			}
			.pic_fenge {
				    margin: 27rpx 0 23rpx 0;
					width:100%;
					height: 50rpx;
					background: url(@/static/images/fengexian2.png) no-repeat center;
					background-size: 100%;
			}
		}

	

		// .title1 {
		// 	width: 375rpx;
		// 	height: 110rpx;
		// 	background: url(@/static/picture/cuttingPage/title2.png) no-repeat left;
		// 	background-size: contain;
		// }


		.item {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding-top: 23rpx;
			box-shadow: 5px 1px 6% #246FA1;
			margin-bottom: 25rpx;
			display: inline-block;
			width: 100%;
			.item-top {
				height: 48rpx;
				margin-top: 10rpx;
				padding: 0 10rpx 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 23rpx;
				font-size: 24rpx;
				color: #5F6475;
                .item-top{
					width: 100%;
					display: flex;
					justify-content: space-between;
					.item-top-left{
						 display: flex;
						.test1 {
							 	padding: 8rpx 16rpx;
							 	background-color: #F4F7FB;
							 	border-radius: 8rpx;
							 	margin-right: 13rpx;
						} 
					 }
					 .test1 {
							align-items: center;
						 	padding: 8rpx 16rpx;
						 	background-color: #F4F7FB;
						 	border-radius: 8rpx;
						 	margin-right: 13rpx;
							display: flex;
							align-items: center;
							.icon {
								display: inline-block;
								width: 24rpx;
								height: 24rpx;
								background-color: red;
								margin-right: 8rpx;
								background: url(@/static/images/gejie_icon1.png) no-repeat center;
								background-size: 100%;
							}
							.icon2{
								background: url(@/static/images/gejie_icon2.png) no-repeat center;
								background-size: 100%;
							}
							.icon3{
								background: url(@/static/images/gejie_icon4.png) no-repeat center;
								background-size: 100%;
							}
							.icon4{
								background: url(@/static/images/gejie_icon3.png) no-repeat center;
								background-size: 100%;
							}
					}
				}
				.item-top-right{
						.city{
							padding: 8rpx 24rpx;
							background-color: #F4F7FB;
							text-align: center;
						}
				}
			}

			.item-center {
				padding-left: 40rpx;
				display: flex;
				align-items: center;
				margin-bottom: 14rpx;

				.item-center-icon {
					width: 60rpx;
					height: 60rpx;
					background-color: #1B9CFF;
					border-radius: 50%;
					background: #1B9CFF url(@/static/images/icon.png) no-repeat center;
					background-size: 50%;
					margin-right: 20rpx;
				}

				.item-center-text {
					font-size: 34rpx;
					width: 565rpx;
				}
			}

			.item-time {
				height: 70rpx;
				padding-left: 25rpx;
				margin-bottom: 23rpx;

				.item-time-text {
					font-size: 24rpx;
					width: 666rpx;
					height: 70rpx;
					line-height: 70rpx;
					padding-left: 25rpx;
					padding-right: 36rpx;
					background-color: #F4F6F8;
					color: #5F6475;
					border-radius: 8rpx;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 隐藏溢出内容 */
				}
			}

			.item-name {
				height: 33rpx;
				padding: 0 86rpx 0 54rpx;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;

				.item-name-left {
					display: flex;
					justify-content: space-between;

					.text {}
				}

				.item-name-right {
					width: 240rpx;
				}
			}
		}
	}

	.first-item {
		margin-top: 20rpx;
	}
/deep/ .u-item-bg,.u-subsection{
	border-radius: 30upx !important;
}
.popupBox{
	.titleView{
		width: 100%;
		height: 93upx;
		line-height: 93upx;
		background: #1B9CFF;
		font-family: Segoe UI, Segoe UI;
		font-weight: bold;
		font-size: 32upx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		
	}
	.boxNr{
		width: 500rpx;
		background: #F7F9FC;
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
	}
	.nrTitle{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		color: #000000;
		font-style: normal;
		text-transform: none;
		padding: 28upx 40upx;
	
	}
	.subTitleNr{
		width: 573upx;
		height: 178upx;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: 22upx auto;
		font-family: Segoe UI, Segoe UI;
		font-weight: 400;
		font-size: 24upx;
		color: #5F6475;
		line-height: 48upx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 25upx 40upx;
	}
}
/deep/ .u-navbar-content-title{
	width: 550rpx !important;
	left: 100rpx !important;
	right: 100rpx !important;
}
</style>
